<template>
    <div class="manage">
        <h1>
        <!-- 上传游戏 -->
        管理游戏
    </h1>
        <table id="gamesTable">
        <thead>
        <tr>
            <th>GID</th>
            <th>名称</th>
            <th>日期</th>
            <th>发行商</th>
            <th>收藏</th>
            <th>PV</th>
            <th>CG</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 表格数据将通过JavaScript动态插入 -->
        </tbody>
    </table>
    </div>
  </template>



<script lang="ts">
import {defineComponent} from 'vue';
import { userInfo } from '@/stores/user';
export default defineComponent({
    setup() {
       // const level = userInfo().level;
        fetch('http://localhost:9999/galgame/game/all')
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                var games = data.data;
                var tableBody = document.getElementById('gamesTable').getElementsByTagName('tbody')[0];

                // 遍历游戏数组并创建表格行
                games.forEach(function(game) {
                    var row = tableBody.insertRow();
                    var cells = ['gid', 'name', 'date', 'publisher', 'collect'];
                    var cellValues = cells.map(cell => game[cell] || '无');
                    cellValues.forEach((value, index) => {
                        var newCell = row.insertCell(index);
                        newCell.textContent = value;
                    });

                    // 添加PV视频和CG图片
                    var pvCell = row.insertCell(-1);
                        var pvVideo = document.createElement('video');
                        pvVideo.src = 'http://localhost:9999/galgame/game/resource?fileName=op.webm&gid='+ game.gid;
                        pvVideo.muted=true;
                        pvVideo.autoplay=true;
                        pvVideo.controls=true;
                        pvCell.appendChild(pvVideo);

                    var cgCell = row.insertCell(-1);
                        var cgImg = document.createElement('img');
                        cgImg.src = 'http://localhost:9999/galgame/game/resource?fileName=1.png&gid='+ game.gid
                        cgImg.alt = 'CG';
                        cgCell.appendChild(cgImg);

                    // 添加操作列和删除按钮
                    var operationCell = row.insertCell(-1);
                    var deleteButton = document.createElement('button');
                    deleteButton.textContent = '删除';
                    deleteButton.onclick = function(row) {
                        if (confirm('确定要删除这个游戏吗?')) { // 确认删除
                            // if (user) {
                                
                            // }
                            fetch('http://localhost:9999/galgame/game/delete?gid='+game.gid, {
                                method: 'GET',
                            })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.code === 201) {
                                        // 删除成功，从表格中移除对应的行
                                        tableBody.deleteRow(row.rowIndex);
                                    } else {
                                        alert("权限不足");
                                    }
                                })
                                .catch(error => {
                                    alert("删除失败")
                                });
                        }
                    };
                    operationCell.appendChild(deleteButton);
                });
            } else {
                // 处理错误或非200响应码的情况
                console.error(data.msg);
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
        return{
           //level: level,
        
        }
    }
  
    
})

</script>

<style>
.manage {
    max-width: 900px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 8px;
            height: fit-content;
        }

.gameShow {
            max-width: 900px;
            margin: auto;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #5c5c5c;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
            text-align: center;
        }

        th, td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #007bff;
            color: white;
            text-align: center;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }

        td img {
            max-width: 200px;
            max-height: 100px;
        }

        /* 视频样式 */
        td video {
            max-width: 200px;
            max-height: 100px;

        }
</style>